<template>
<!--  <div class="search-form-box" :style="{'min-width': cssObj.minWidth?cssObj.minWidth:''}">-->
<!--    <el-form-->
<!--      ref="formRef"-->
<!--      :model="formData"-->
<!--      :inline="true"-->
<!--      size="small"-->
<!--      :label-width="cssObj.inputWidth"-->
<!--    >-->
<!--      <el-row v-if="!cssObj.isOnlyOneRow">-->
<!--        <el-col :span="item.span ? item.span : 24/cssObj.colLenth"-->
<!--                class="colClass"-->
<!--                v-for="(item, index) in formOptions"-->
<!--                :key="index">-->
<!--          <el-form-item-->
<!--            :prop="item.prop"-->
<!--            :label="item.label ? item.label : ''"-->
<!--            :rules="item.rules"-->
<!--          >-->
<!--            <formItem v-model="formData[item.prop]" :item-options="item" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        &lt;!&ndash; 自定义插槽，可用于特殊表单块 &ndash;&gt;-->
<!--        <el-col :span="cssObj.slotSpan ? cssObj.slotSpan : 0" class="colClass">-->
<!--          <slot />-->
<!--        </el-col>-->
<!--        <el-col :span="cssObj.btnSpan" class="colClass" :style="{'text-align': cssObj.btnTextAlign}">-->
<!--          <el-form-item :style="{paddingLeft:`${cssObj.left}`}">-->
<!--            <my-button-->
<!--              v-if="btnItems.includes('search')"-->
<!--              size="mini"-->
<!--              type="primary"-->
<!--              class="btn-search"-->
<!--              @click.native.stop="onSearch"-->
<!--            >查询</my-button-->
<!--            >-->
<!--            <el-button-->
<!--              v-if="btnItems.includes('reset')"-->
<!--              size="mini"-->
<!--              type="default"-->
<!--              class="btn-reset"-->
<!--              @click.native.stop="onReset"-->
<!--            >重置</el-button-->
<!--            >-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row v-else class="onlyOneClass">-->
<!--        <el-form-item-->
<!--          v-for="(item, index) in formOptions"-->
<!--          :key="index"-->
<!--          :prop="item.prop"-->
<!--          :label="item.label ? item.label : ''"-->
<!--          :rules="item.rules"-->
<!--        >-->
<!--          <formItem v-model="formData[item.prop]" :item-options="item" />-->
<!--        </el-form-item>-->
<!--        <slot />-->
<!--        <el-form-item :style="{paddingLeft:`${cssObj.left}`}">-->
<!--          <my-button-->
<!--            v-if="btnItems.includes('search')"-->
<!--            size="mini"-->
<!--            type="primary"-->
<!--            class="btn-search"-->
<!--            @click.native.stop="onSearch"-->
<!--          >查询</my-button-->
<!--          >-->
<!--          <el-button-->
<!--            v-if="btnItems.includes('reset')"-->
<!--            size="mini"-->
<!--            type="default"-->
<!--            class="btn-reset"-->
<!--            @click.native.stop="onReset"-->
<!--          >重置</el-button-->
<!--          >-->
<!--        </el-form-item>-->
<!--      </el-row>-->
<!--    </el-form>-->
<!--  </div>-->
  <div class="search-form-box">
    <el-form
      ref="formRef"
      :model="formData"
      :inline="true"
      size="small"
      :label-width="cssObj.inputWidth ? cssObj.inputWidth : '100px'"
    >
      <el-form-item
        v-for="(item, index) in formOptions"
        :key="index"
        :prop="item.prop"
        :label="item.label ? item.label : ''"
        :rules="item.rules"
      >
        <formItem v-model="formData[item.prop]" :item-options="item" />
      </el-form-item>

      <!-- 自定义插槽，可用于特殊表单块 -->
      <slot />
      <el-form-item style="margin-left: 20px">
        <my-button
          v-if="btnItems.includes('search')"
          size="small"
          type="primary"
          class="btn-search"
          @click.native.stop="onSearch"
        >查询</my-button
        >
        <el-button
          v-if="btnItems.includes('reset')"
          size="small"
          type="default"
          class="btn-reset"
          @click.native.stop="onReset"
        >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import formItem from '@/components/SearchForm/formItem.vue'
import { createUniqueString } from '@/utils/tools'

export default {
  components: { formItem },
  props: {
    /**
     * 表单配置
     * 示例：
     * [{
     *   label: '用户名', // label文字
     *   prop: 'username', // 字段名
     *   element: 'el-input', // 指定elementui组件
     *   initValue: '阿黄', // 字段初始值
     *   placeholder: '请输入用户名', // elementui组件属性
     *   rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
     *   events: { // elementui组件方法
     *     input (val) {
     *       console.log(val)
     *     },
     *     ...... // 可添加任意elementui组件支持的方法
     *   }
     *   ...... // 可添加任意elementui组件支持的属性
     * }]
     */
    formOptions: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    // 提交按钮项，多个用逗号分隔（search, export, reset）
    btnItems: {
      type: String,
      default() {
        return 'search'
      }
    },
    // 如果搜索条件过多，需要换行，请自行设置样式宽度来保证上下对齐
    cssObj: {
      type: Object,
      default() {
        return {
          inputWidth:'100px',// 查询条件label宽度，设置是为了对齐
          slotSpan:0,// 插槽占宽,默认为0
          colLenth:'3',// 一行显示几个
          btnSpan:8,// 按钮占宽
          left:'40px'
        }
      }
    },
    rowObj:{
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    return {
      formData: {}
    }
  },

  computed: {
    newKeys() {
      return this.formOptions.map(v => {
        return createUniqueString
      })
    }
  },

  //搜索form 如果需要初始值,
  //cssObj.formOptionVal=[] 然后 cssObj.formOptionVal=[12,34]
  // 请动态设置 cssObj.formOptionVal 值不重要
  //watch 就只有异步操作后期改变 默认值生效,
  watch:{
   'cssObj.formOptionVal':{
     handler: function() {
       // 调用默认值赋值方法
       this.addInitValue()
     }
   },
  },

  // 2023-5-22 为何去掉呢 ? 改成watch? 为了异步动态数据 ?
  created() {
    // this.addInitValue() //临时启用
  },
  methods: {
    // 校验
    onValidate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          console.log('提交成功')
          console.log(this.formData)
          callback()
        }
      })
    },
    // 搜索
    onSearch() {
      this.onValidate(() => {
        this.$emit('onSearch', this.formData)
      })
    },
    // 导出
    onExport() {
      this.onValidate(() => {
        this.$emit('onExport', this.formData)
      })
    },
    onReset() {
      //先点重置, 会导致表单输入选择异常,无法操作,
      // this.$refs.formRef.resetFields()
      //yg 2023-4-24
      Object.keys(this.formData).forEach((key => {
        this.formData[key]=''
      }))
      // console.error(Object.keys(this.formData),'+++++++++++++++++>>>>>>>')
      console.error(this.formData,'+++++++++++++++++>>>>>>>')
    },
    // 添加初始值
    addInitValue() {
      const obj = {}
        this.formOptions.forEach(v => {
          if (v.initValue !== undefined) {
            obj[v.prop] = v.initValue
          }
        })
        this.formData = obj
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form-box {
  display: flex;
  margin-bottom: 16px;
  background: #F7F8FA;
  padding: 16px 10px 11px 10px;
  .onlyOneClass{
    background: rgb(243, 244, 249);
    padding: 5px 10px;
  }
  .btn-box {
    padding-top: 5px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
    button {
      height: 28px;
    }
  }
  .el-form {
    width: 100%;
    ::v-deep .el-form-item__label {
      //padding-right: 8px;
    }
    ::v-deep  el-form--inline{
      width: 100%;
    }
    .el-form-item--small {
      margin-bottom: 0px;
      //background: #f3f4f9;
      //padding: 5px;
    }
    .el-form-item--small.el-form-item {
      margin-bottom: 5px;
    }
    .el-form--inline .el-form-item {
      display: inline-block;
      margin-right: 10px;
      vertical-align: top;
    }
    // el-input宽度
    ::v-deep .form-item {
      > .el-input:not(.el-date-editor) {
        //width: 220px;
      }
    }
    ::v-deep .el-select {
       //width: 220px;
    }
    ::v-deep .el-cascader {
      //width: 240px;
    }
    ::v-deep .el-checkbox-group{
      height: 33px;
    }
  }
  .colClass{
    margin-bottom: 1px;
    background: #f3f4f9;
    padding: 5px;
  }
}
::v-deep{
  .el-button--small{
    padding: 7px 23px;
    height: 32px;
  }
}
::v-deep {
  .el-form--inline .el-form-item .el-form-item__label{
  font-size: 14px;
  font-weight: 400;
  color: #333333 !important;
}
  .el-input__inner{
    border: 1px solid #DCDEE0;
    padding: 0 12px;
  }
}
</style>
